<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编码转换工具</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* CSS变量定义 */
        :root {
            --primary-color: #3498db;
            --primary-hover: #2980b9;
            --secondary-color: #95a5a6;
            --secondary-hover: #7f8c8d;
            --background-color: #f4f4f4;
            --card-background: #ffffff;
            --text-color: #333333;
            --border-color: #dddddd;
            --border-radius: 5px;
            --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            --font-family: Arial, sans-serif;
            --monospace-font: 'Courier New', monospace;
            --gap: 20px;
        }
        
        body {
            font-family: var(--font-family);
            background-color: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 95%;
            margin: 0 auto;
        }
        
        /* 头部样式 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        h1 {
            color: #2c3e50;
            font-size: 24px;
        }
        
        .back-btn {
            background-color: var(--primary-color);
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: var(--border-radius);
            transition: background-color 0.3s ease;
        }
        
        .back-btn:hover {
            background-color: var(--primary-hover);
        }
        
        /* 工具卡片样式 */
        .tool-card {
            background-color: var(--card-background);
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--box-shadow);
        }
        
        /* 按钮组样式 */
        .btn-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }
        
        .btn:hover {
            background-color: var(--primary-hover);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .btn-secondary {
            background-color: var(--secondary-color);
        }
        
        .btn-secondary:hover {
            background-color: var(--secondary-hover);
        }
        
        /* 按钮组特殊样式 */
        .btn-group .btn.active {
            background-color: var(--primary-color);
        }
        
        /* 编码类型分组 */
        .encode-group {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .encode-group-title {
            font-weight: bold;
            margin-right: 10px;
            min-width: 80px;
            display: flex;
            align-items: center;
        }
        
        /* 输入输出容器样式 */
        .io-container {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        
        .io-panel {
            flex: 1;
            min-width: 0;
        }
        
        .io-header {
            font-weight: bold;
            margin-bottom: 10px;
            color: #555;
        }
        
        /* 文本区域样式 */
        .textarea-wrapper {
            position: relative;
            height: 400px;
        }
        
        textarea {
            width: 100%;
            height: 100%;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-family: var(--monospace-font);
            font-size: 14px;
            resize: vertical;
            line-height: 1.5;
            overflow: auto;
            box-sizing: border-box;
        }
        
        /* 行号容器样式 */
        .lined-area {
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        /* 行号区域样式 */
        .line-numbers {
            background-color: #f0f0f0;
            color: #808080;
            text-align: right;
            padding: 15px 8px;
            border-right: 1px solid #ddd;
            user-select: none;
            font-family: var(--monospace-font);
            font-size: 14px;
            line-height: 1.5;
            overflow: hidden;
            min-width: 40px;
            white-space: pre;
        }
        
        /* 内容区域样式 */
        .content-area {
            flex: 1;
            padding: 15px;
            overflow: auto;
            font-family: var(--monospace-font);
            font-size: 14px;
            line-height: 1.5;
            background-color: #fafafa;
        }
        
        /* 高亮区域样式 */
        .highlighted-content {
            margin: 0;
        }
        
        /* 文本区域样式 */
        .textarea-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
        

        
        /* 底部操作按钮样式 */
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        /* 自定义提示样式 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 15px 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        .toast.error {
            background-color: #f44336;
        }
        
        .toast.info {
            background-color: #2196F3;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .io-container {
                flex-direction: column;
            }
            
            .btn-group {
                flex-direction: column;
            }
            
            textarea,
            .highlighted-area {
                height: 400px;
            }
            

        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>编码转换工具</h1>
            <a href="index.html" class="back-btn">返回主页</a>
        </header>
        
        <div class="tool-card">
            <!-- 编码转换按钮组 -->
            <div class="encode-group">
                <div class="encode-group-title">Base64:</div>
                <button class="btn btn-secondary" onclick="encodeBase64()">Base64编码</button>
                <button class="btn btn-secondary" onclick="decodeBase64()">Base64解码</button>
            </div>
            
            <div class="encode-group">
                <div class="encode-group-title">MD5:</div>
                <button class="btn btn-secondary" onclick="encodeMD5()">MD5加密</button>
            </div>
            
            <div class="encode-group">
                <div class="encode-group-title">SHA:</div>
                <button class="btn btn-secondary" onclick="encodeSHA1()">SHA-1加密</button>
                <button class="btn btn-secondary" onclick="encodeSHA256()">SHA-256加密</button>
                <button class="btn btn-secondary" onclick="encodeSHA512()">SHA-512加密</button>
            </div>
            
            <div class="encode-group">
                <div class="encode-group-title">其他:</div>
                <button class="btn btn-secondary" onclick="encodeURL()">URL编码</button>
                <button class="btn btn-secondary" onclick="decodeURL()">URL解码</button>
                <button class="btn btn-secondary" onclick="encodeHex()">Hex编码</button>
                <button class="btn btn-secondary" onclick="decodeHex()">Hex解码</button>
            </div>
            
            <!-- 输入输出区域 -->
            <div class="io-container">
                <!-- 输入区域 -->
                <div class="io-panel">
                    <div class="io-header">输入内容：</div>
                    <div class="textarea-wrapper">
                        <textarea id="inputArea" placeholder="请输入要转换的内容..."></textarea>
                    </div>
                </div>
                
                <!-- 输出区域 -->
                <div class="io-panel">
                    <div class="io-header" style="display: flex; justify-content: space-between; align-items: center;">
                        输出结果：
                        <button class="btn btn-secondary" style="padding: 5px 10px; font-size: 12px;" onclick="copyResult()">复制</button>
                    </div>
                    <div class="textarea-wrapper">
                        <div id="outputTextAreaContainer" class="textarea-container">
                            <textarea id="outputArea" readonly placeholder="处理结果将显示在这里..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部操作按钮 -->
            <div class="action-buttons">
                <button class="btn btn-secondary" onclick="copyResult()">复制结果</button>
                <button class="btn btn-secondary" onclick="clearAll()">清空所有</button>
            </div>
        </div>
    </div>
    
    <script>
        // 显示自定义提示
        function showToast(message, type = 'success') {
            // 创建提示元素
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.textContent = message;
            
            // 添加到页面
            document.body.appendChild(toast);
            
            // 显示提示
            setTimeout(() => {
                toast.classList.add('show');
            }, 100);
            
            // 自动隐藏
            setTimeout(() => {
                toast.classList.remove('show');
                // 移除元素
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 2000);
        }
        
        // 通用函数：复制结果
        function copyResult() {
            const output = document.getElementById('outputArea');
            output.select();
            
            try {
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(output.value).then(() => {
                        showToast('结果已复制到剪贴板');
                    }).catch(err => {
                        document.execCommand('copy');
                        showToast('结果已复制到剪贴板');
                    });
                } else {
                    document.execCommand('copy');
                    showToast('结果已复制到剪贴板');
                }
            } catch (err) {
                showToast('复制失败，请手动复制内容', 'error');
            }
        }
        
        // 通用函数：清空所有
        function clearAll() {
            document.getElementById('inputArea').value = '';
            document.getElementById('outputArea').value = '';
        }
        
        // Base64编码
        function encodeBase64() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要编码的内容', 'error');
                return;
            }
            
            try {
                const encoded = btoa(unescape(encodeURIComponent(input)));
                document.getElementById('outputArea').value = encoded;
                showToast('Base64编码成功');
            } catch (err) {
                showToast('Base64编码失败：' + err.message, 'error');
            }
        }
        
        // Base64解码
        function decodeBase64() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要解码的内容', 'error');
                return;
            }
            
            try {
                const decoded = decodeURIComponent(escape(atob(input)));
                document.getElementById('outputArea').value = decoded;
                showToast('Base64解码成功');
            } catch (err) {
                showToast('Base64解码失败：' + err.message, 'error');
            }
        }
        
        // MD5加密
        function encodeMD5() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要加密的内容', 'error');
                return;
            }
            
            try {
                const md5Hash = CryptoJS.MD5(input).toString();
                document.getElementById('outputArea').value = md5Hash;
                showToast('MD5加密成功');
            } catch (err) {
                showToast('MD5加密失败：' + err.message, 'error');
            }
        }
        
        // SHA-1加密
        function encodeSHA1() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要加密的内容', 'error');
                return;
            }
            
            try {
                const sha1Hash = CryptoJS.SHA1(input).toString();
                document.getElementById('outputArea').value = sha1Hash;
                showToast('SHA-1加密成功');
            } catch (err) {
                showToast('SHA-1加密失败：' + err.message, 'error');
            }
        }
        
        // SHA-256加密
        function encodeSHA256() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要加密的内容', 'error');
                return;
            }
            
            try {
                const sha256Hash = CryptoJS.SHA256(input).toString();
                document.getElementById('outputArea').value = sha256Hash;
                showToast('SHA-256加密成功');
            } catch (err) {
                showToast('SHA-256加密失败：' + err.message, 'error');
            }
        }
        
        // SHA-512加密
        function encodeSHA512() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要加密的内容', 'error');
                return;
            }
            
            try {
                const sha512Hash = CryptoJS.SHA512(input).toString();
                document.getElementById('outputArea').value = sha512Hash;
                showToast('SHA-512加密成功');
            } catch (err) {
                showToast('SHA-512加密失败：' + err.message, 'error');
            }
        }
        
        // URL编码
        function encodeURL() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要编码的内容', 'error');
                return;
            }
            
            try {
                const encoded = encodeURIComponent(input);
                document.getElementById('outputArea').value = encoded;
                showToast('URL编码成功');
            } catch (err) {
                showToast('URL编码失败：' + err.message, 'error');
            }
        }
        
        // URL解码
        function decodeURL() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要解码的内容', 'error');
                return;
            }
            
            try {
                const decoded = decodeURIComponent(input);
                document.getElementById('outputArea').value = decoded;
                showToast('URL解码成功');
            } catch (err) {
                showToast('URL解码失败：' + err.message, 'error');
            }
        }
        
        // Hex编码
        function encodeHex() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要编码的内容', 'error');
                return;
            }
            
            try {
                let hex = '';
                for (let i = 0; i < input.length; i++) {
                    hex += input.charCodeAt(i).toString(16).padStart(2, '0');
                }
                document.getElementById('outputArea').value = hex;
                showToast('Hex编码成功');
            } catch (err) {
                showToast('Hex编码失败：' + err.message, 'error');
            }
        }
        
        // Hex解码
        function decodeHex() {
            const input = document.getElementById('inputArea').value;
            if (!input) {
                showToast('请输入要解码的内容', 'error');
                return;
            }
            
            try {
                // 移除空格和换行
                const cleanInput = input.replace(/\s/g, '');
                let text = '';
                for (let i = 0; i < cleanInput.length; i += 2) {
                    const hex = cleanInput.substr(i, 2);
                    text += String.fromCharCode(parseInt(hex, 16));
                }
                document.getElementById('outputArea').value = text;
                showToast('Hex解码成功');
            } catch (err) {
                showToast('Hex解码失败：' + err.message, 'error');
            }
        }
    </script>
    
    <!-- 引入CryptoJS库用于加密功能 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</body>
</html>